import React, { Component } from "react";
import { Select, Checkbox, Table, Button } from "antd";
const { Option } = Select;
class home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const columns = [
      {
        title: "任务名称",
        dataIndex: "name",
      },
      {
        title: "类型",
        dataIndex: "type",
      },
      {
        title: "最后扫描结束时间",
        dataIndex: "time",
      },
      {
        title: "耗时",
        dataIndex: "elapsedtime",
      },
      {
        title: "创建者",
        dataIndex: "creator",
      },
    ];
    const data = [
      {
        key: "1",
        name: "xhr",
        type: 32,
        time: "2020-11-12 14:02:03",
        elapsedtime: "2分30秒",
        creator: "admin",
      },
      {
        key: "2",
        name: "tlj",
        type: 32,
        time: "2020-11-13 11:44:03",
        elapsedtime: "3分35秒",
        creator: "admin",
      },
      {
        key: "3",
        name: "zsz",
        type: 32,
        time: "2020-11-14 06:54:03",
        elapsedtime: "6分47秒",
        creator: "admin",
      },
    ];
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        name: record.name,
      }),
    };
    return (
      <div>
        <div className="home-top">
          <div style={{ margin: 5 }}>
            <span>报告类型</span>
            <Select defaultValue="1" style={{ width: 200, marginLeft: 5 }}>
              <Option value="1">Word</Option>
              <Option value="2">Dox</Option>
            </Select>
          </div>
          <div style={{ margin: 5 }}>
            <span>报告模板</span>
            <Select defaultValue="1" style={{ width: 200, marginLeft: 5 }}>
              <Option value="1">系统默认模板</Option>
              <Option value="2">基础模板</Option>
            </Select>
          </div>
          <div>
            <span style={{ margin: 5 }}>导出方式</span>
            <span style={{ margin: 5 }}>
              <Checkbox />
              &nbsp; 合并导出
            </span>
            <span style={{ margin: 5 }}>
              <Checkbox />
              &nbsp;批量导出
            </span>
          </div>
        </div>
        <div style={{ margin: 5 }}>
          <Button type="primary" style={{ margin: 5 }}>
            导出
          </Button>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
          />
          ,
        </div>
      </div>
    );
  }
}

export default home;
